<template>
    <div class="clearfix" style="background-color: deepskyblue">
        <el-container>
            <el-main style="height: 500px; background-color: #F3F3F3">
                <!--内容区域，包括左侧边栏，中间轮播，右侧边栏-->
                <div class="main-content">
                    <div class="main-content-leftSide">
                        <ul class="main-content-leftSide-ul" :model = tradeData>

                            <li class="in_mouse_hover"
                                style="position: relative;"
                                v-for=" item in tradeData"

                                @mouseenter="showTradeBaseInfo(item)"

                            >
                                <span>{{item.label}}</span>
                                <i class="el-icon-arrow-right" style="position: absolute;top: 8px;right: 20px"></i>

                            </li>

                            <router-link to="/home/headhuntingCompany/recruimentHeadhunting">
                                <li>
                                    <span style="color: #000">全部职位</span>
                                </li>
                            </router-link>

                        </ul>
                    </div>

                    <!--Hover 以后信息展示-->
                    <div v-if="isHover == true"
                         @mouseleave="isHover = false"
                         class = "main-content-content-hover">
                        <div v-for="twoItem in tradeDataSub">
                            <h4>{{twoItem.label}}</h4>
                            <hr style="height: 1px; border: none; background-color: #eeeeee">

                            <span v-for="(items) in twoItem.children">
                                <span class="p-style-info">{{items.label}}</span>
                            </span>
                        </div>
                    </div>
                    <!--轮播效果-->
                    <div v-else class="main-content-content">
                        <template>
                            <el-carousel
                                    :autoplay="true"
                                    height="400px"
                                    :interval="5000">
                                <el-carousel-item v-for="item in aroundInfo" :key="item">
                                    <el-image
                                            style="width: 100%; height: 400px"
                                            :src="item"
                                            fit="fit"></el-image>
<!--                                    <h3>{{ item }}</h3>-->
                                </el-carousel-item>
                            </el-carousel>
                        </template>
                    </div>


                    <!--
                        右侧登录边栏目
                        以后需要做路由
                    -->
                    <div v-if="isTokens" class="main-content-rightSide">
                        <div style="text-align: center;line-height: 400px">
                            <h2>你好，欢迎登录</h2>
                        </div>
                    </div>

                    <div v-else class="main-content-rightSide">
                       <div class="main-title-loginInfo">
                           <span v-if="companyOrPerson == true" style="font-size: 18px;font-weight: bold">求职用户登录</span>
                           <span v-else style="font-size: 18px;font-weight: bold">企业用户登录</span>
<!--                           <span v-if="clientOrServer == false" style="font-size: 18px;font-weight: bold">企业用户登录</span>-->
                           <span style="margin-left: 30px">
                               <el-button type="text" v-if="companyOrPerson == true" @click="changeCompanyOrPersonal()">企业用户登录</el-button>
                               <el-button type="text" v-if="companyOrPerson == false" @click="changeCompanyOrPersonal()">个人用户登录</el-button>
                               <i class="el-icon-arrow-right"></i>
                           </span>
                       </div>
                        <div class="main-content-loginInfo" style="margin-top: -30px">
                            <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
                                <el-input v-model="dataForm.clientOrServer" type="hidden"></el-input>
                                <!--登录框-->
                                <el-form-item prop="username">
                                    <el-input
                                            v-model="dataForm.username"
                                            style="width: 240px;"
                                            size="midle"
                                            type="text"
                                            placeholder="请输入手机号/用户名/邮箱"
                                    >
                                    </el-input>
                                </el-form-item>
                                <!--密码框-->
                                <el-form-item prop="password">
                                    <el-input
                                            v-model="dataForm.password"
                                            style="width: 240px"
                                            size="midle"
                                            type="password"
                                            placeholder="请输入密码"
                                    >
                                    </el-input>
                                </el-form-item>

                                <el-form-item prop="captcha">
                                    <el-row :gutter="15">
                                        <el-col :span="13">
                                            <el-input v-model="dataForm.captcha" placeholder="验证码">
                                            </el-input>
                                        </el-col>
                                        <el-col :span="10" class="login-captcha">
                                            <img style="width: 100px;height: 38px" :src="captchaPath" @click="getCaptcha()" alt="">
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                            </el-form>
                            <!--登录方法-->
                            <div class="main-content-loginMethod" style="margin-top: -20px">
                                <span style="display: inline-block;margin-left: 165px;">
                                    <el-link type="info" :underline="false" style="font-size: 13px">忘记密码?</el-link>
                                </span>
                            </div>
                            <!--登录按钮-->
                            <div class="main-content-login-button">
                                <el-button type="primary" style="width: 240px" @click="dataFormSubmit()">立即登录</el-button>
                            </div>
                            <!--去注册-->
                            <div class="main-content-go-register">
                                <span>
                                    没有账号?立即&nbsp;
                                    <el-link type="primary" :underline="false" style="font-size: 13px;margin-top: -4px">注册</el-link>
                                </span>
                            </div>
                        </div>
                    </div>


                </div>
                <!--福利制度-->
                <div class="main-welfare" style="float: left">
                    <!--福利制度列表-->
                    <div class="mian-welfare-list">
                        <span>
                             <el-link :underline="false">职位福利</el-link>
                        </span>
                            <span v-for="item in walfareOption" :key="item.value">
                                <el-link :underline="false">{{item.label}}</el-link>
                            </span>
                        <span>
                            <el-link :underline="false">
                                更多
                                <i class="el-icon-position"></i>
                            </el-link>
                        </span>
                    </div>
                </div>
            </el-main>

            <!--请完善用户的基本信息 Dialog-->
            <el-dialog
                title="请完善基本信息"
                :visible.sync="baseInfoVisibDialog"
                width="60%"
            >
                <el-form :inline="true"
                         :model="baseInfoForm"
                         class="demo-form-inline"
                         label-width="150px"
                >

                    <el-form-item label="头像：">
                        <div class="advatar_container">
                            <el-upload
                                    name="photo"
                                    class="avatar-uploader"
                                    :action="uploadAdvatorUrl"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">

                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </el-form-item>



                    <el-form-item label="真实姓名："  label-width="260px">
                        <el-input v-model="baseInfoForm.name" placeholder="请填写姓名"></el-input>
                    </el-form-item>

                    <el-form-item label="性别：">
                        <el-select v-model="baseInfoForm.gender"
                                   placeholder="请选择"
                                   style="width: 205px"
                        >
                            <el-option label="男" value="1"></el-option>
                            <el-option label="女" value="0"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="年龄：" label-width="150px">
                        <el-input v-model="baseInfoForm.age" placeholder="请填写年龄"></el-input>
                    </el-form-item>

                    <el-form-item label="电话：">
                        <el-input v-model="baseInfoForm.phone" placeholder="请填写电话"></el-input>
                    </el-form-item>

                    <el-form-item label="微信：">
                        <el-input v-model="baseInfoForm.wechat" placeholder="请填写微信号"></el-input>
                    </el-form-item>

                    <el-form-item label="QQ：">
                        <el-input v-model="baseInfoForm.qq" placeholder="请填写QQ"></el-input>
                    </el-form-item>

                    <el-form-item label="邮箱：">
                        <el-input v-model="baseInfoForm.email" placeholder="请填写邮箱"></el-input>
                    </el-form-item>


                    <el-form-item label="选择学历：" >
                        <el-select placeholder="请选择"
                                   v-model="baseInfoForm.educationId"
                                   style="width: 205px">
                            <el-option
                                    v-for="item in educationOption"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="saveBaseInfo()">保存信息</el-button>
                </span>
            </el-dialog>
        </el-container>
    </div>
</template>

<script>
    import { getUUID } from '@/utils/index'
    import userApi  from '@/api/user'
    import commonApi from '@/api/commonApi'
    import { Message } from "element-ui";
    import userBaseInfoApi from "@/api/userbaseinfosApi/userBaseInfoApi";

    export default {
        name: "main-content",
        inject:['reload'],
        data(){
            return{
                uploadAdvatorUrl:'',
                imageUrl:'',

                //pathAdvatorUrl:'',
                //用户的基本信息
                baseInfoForm:{
                    userInfoId:'',
                    name:'',
                    gender:'',
                    age:'',
                    phone:'',
                    wechat:'',
                    qq:'',
                    email:'',
                    educationId:'',
                    advator:''
                },

                educationOption:[],
                /*处理登录的参数*/
                dataForm: {
                    username: '',
                    password: '',
                    uuid: '',
                    captcha: '',
                    clientOrServer:'1' ,              //1 客户端
                    companyOrPerson:'2'               //2 客户登录 3企业用户
                },
                companyOrPerson: true,
                //二维码的图片路径
                captchaPath:'',
                user:{},
                isTokens:false,

                //页面行业的列表数据
                tradeData:[],
                //子数据
                tradeDataSub:[],
                //houver以后显示
                isHover:false,

                walfareOption:[],

                //登录表单的验证
                dataRule: {
                    username: [
                        { required: true, message: '帐号不能为空', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' }
                    ],
                    captcha: [
                        { required: true, message: '验证码不能为空', trigger: 'blur' }
                    ]
                },
                activeIndex: '1',
                activeIndex2: '1',
                aroundInfo:[
                    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-c60e9f1e619e6c05d69c8d173c1f25c9_1440w.jpg%3Fsource%3D172ae18b&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651458436&t=4e520db97decf66116b47d1f9f97a03d',
                    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-059f6f1a9c323104b7daf11c15ac6904_1440w.jpg%3Fsource%3D172ae18b&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651458518&t=6c88a4819ba62f9f8eeae7dc1f03b8b6',
                    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.nbyongpin.com%2Fwp-content%2Fuploads%2F2018%2F11%2F008.jpg&refer=http%3A%2F%2Fwww.nbyongpin.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651458518&t=e9ad79beefc6d23e233e09a0bd67217c'
                ],



                //打开弹窗
                baseInfoVisibDialog:false


            }

        },
        created() {
            this.getCaptcha()
            this.loadingWelfare()
            this.isToken()
            this.loadingindustory()

            this.loadingEducation()

        },
        mounted() {
            this.loadingInfo()
            this.uploadUrl()
        },
        methods:{
            showTradeBaseInfo(tradeObj){
                this.isHover = true;
                this.tradeDataSub = tradeObj.children
            },

            /*保存基本信息*/
            saveBaseInfo(){

                if (this.baseInfoForm.name == '' || this.baseInfoForm.name ==undefined){
                    this.$message({
                        type:'warning',
                        message:'姓名字段不能为空，请输入姓名'
                    })
                   return
                }

                if(this.baseInfoForm.gender == '' || this.baseInfoForm.gender == undefined){
                    this.$message({
                        type:'warning',
                        message:'性别字段不能为空，请选择性别'
                    })
                    return
                }

                if(this.baseInfoForm.age == '' || this.baseInfoForm.age == undefined){
                    this.$message({
                        type:'warning',
                        message:'年龄字段不能为空'
                    })
                    return
                }
                if(this.baseInfoForm.age<18 || this.baseInfoForm.age>65){
                    this.$message({
                        type:'warning',
                        message:'请输入合法的年龄字段18~65之间'
                    })
                    return
                }

                if(this.baseInfoForm.phone == '' || this.baseInfoForm.phone == undefined){
                    this.$message({
                        type:'warning',
                        message:'手机号不能为空，请输入手机号'
                    })
                    return
                }
                let phoneRegex = "0?(13|14|15|17|18|19)[0-9]{9}"
                /*if (this.baseInfoForm.phone.match(phoneRegex))*/
                console.log("this.baseInfoForm.phone.match(phoneRegex) == >",this.baseInfoForm.phone.match(phoneRegex))
                if(this.baseInfoForm.phone.match(phoneRegex) == null){
                    this.$message({
                        type:'warning',
                        message:'手机号格式不正确，请重新输入'
                    })
                    this.baseInfoForm.phone = ''
                    return
                }

                //--------------------------------//

                if (this.baseInfoForm.wechat == '' || this.baseInfoForm.wechat == undefined){
                    this.$message({
                        type:'warning',
                        message:'微信不能为空，请填写微信号码'
                    })
                    return
                }

                if (this.baseInfoForm.qq == '' || this.baseInfoForm.qq == undefined){
                    this.$message({
                        type:'warning',
                        message:'QQ号码不能为空，请填写QQ'
                    })
                    return
                }

                let qqRegex = '[1-9][0-9]{4,14}'
                if(this.baseInfoForm.qq.match(qqRegex) == null){
                    this.$message({
                        type:'warning',
                        message:'QQ号码的格式不正确，请使用正确的qq号码格式'
                    })
                    return
                }

                if(this.baseInfoForm.email == '' || this.baseInfoForm.email == undefined){
                    this.$message({
                        type:'warning',
                        message:'邮箱信息不能为空，请填写邮箱信息'
                    })
                    return
                }

                let emailRegex = "\\w[-\\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\\.)+[A-Za-z]{2,14}"

                if (this.baseInfoForm.email.match(emailRegex) == null){
                    this.$message({
                        type:'warning',
                        message:'邮箱格式不正确，请重新输入'
                    })
                    this.baseInfoForm.email = ''
                    return
                }

                if(this.baseInfoForm.educationId == '' || this.baseInfoForm.educationId == undefined){
                    this.$message({
                        type:'warning',
                        message:'学历不能为空，请选择学历'
                    })
                    return;
                }
                const userId = JSON.parse(localStorage.getItem("user")).userId
                this.baseInfoForm.userInfoId = userId

                userBaseInfoApi.saveUserBaseInfo(this.baseInfoForm)
                .then(data => {
                    if (data.data.code === 0){
                        this.$message({
                            type:'success',
                            message:'信息保存成功'
                        })

                        //将填写的信息保存到userBaseInfo中
                        localStorage.setItem("userbaseInfo",JSON.stringify(this.baseInfoForm))
                        this.baseInfoVisibDialog = false

                    }
                })
                .catch(err => {
                    Promise.reject(err)
                })
            },
            /*看一下baseInfo有没有被加载*/
            loadingInfo(){
                const cookie = this.$cookie.get("client_token")
                if (cookie){
                    const baseInfoObj = JSON.parse(localStorage.getItem("userbaseInfo"))
                    console.log("baseInfoObj",baseInfoObj)
                    if (baseInfoObj==null){
                        this.baseInfoVisibDialog = true;
                    }
                }
            },

            /*加载学历信息*/
            loadingEducation(){
                commonApi.loadingEducation()
                .then(data => {
                    if(data.data.code === 0){
                        this.educationOption = data.data.data
                    }
                })
                .catch(err => {
                    Promise.reject(err)
                })
            },

            /*加载行业信息*/
            loadingindustory(){
                commonApi.loadingIndustory()
                .then(data => {
                    if (data.data.code == 0){
                        this.tradeData = data.data.data
                    }
                })
                .catch(error => {

                })

            },

            //用来判断是否登录
            isToken(){
              const client_token = this.$cookie.get("client_token");

                if (client_token){
                    this.isTokens = true
                }else{
                    this.isTokens = false
                }
            },
            handleSelect(key, keyPath) {
                //console.log(key, keyPath);
            },
            // 获取验证码
            getCaptcha () {
                this.dataForm.uuid = getUUID()
                this.captchaPath = 'http://localhost:8088//renren-fast/captcha.jpg?uuid=' + this.dataForm.uuid;
            },
            //登录功能
            dataFormSubmit(){
                this.$refs['dataForm'].validate((valid) => {
                    if (valid){
                        userApi.login(this.dataForm).then(response => {
                            if (response.status == 200 && response.data.code === 0) {
                                localStorage.setItem("client_token",response.data.token)
                                this.$cookie.set('client_token', response.data.token)
                                this.$router.replace({name:'home'})
                                this.dataForm.username = ''
                                this.dataForm.password = ''
                                this.dataForm.captcha = ''
                                userApi.loginInfo().then(response => {
                                    this.user = response.data.user;
                                    const userInfo = JSON.stringify(this.user)
                                    localStorage.setItem('user',userInfo)
                                    this.$router.replace({name:'home'})
                                    //location.reload()           //重新加载页面 方式一
                                    this.reload()                 //重新加载页面 方式二  最优方法
                                    // 加载菜单和权限
                                userApi.loadingMenuAndPers(this.user.userId)
                                    .then(data => {
                                        sessionStorage.setItem('menuList',JSON.stringify(data.data.menuList))
                                        sessionStorage.setItem('permissions',JSON.stringify(data.data.permissions))

                                        userApi.loadingBaseInfo(this.user.userId)
                                            .then(data => {
                                                if (data.data.code === 0){
                                                    localStorage.setItem("userbaseInfo",JSON.stringify(data.data.baseInfo))
                                                    this.isTokens = true;
                                                    this.reload()           //重新刷新页面
                                                }
                                            })
                                            .catch(error => {
                                                Promise.reject(error)
                                            })
                                    })
                                    .catch(error =>{
                                        Promise.reject(error)
                                    })
                                })
                                .catch(error => {
                                    Promise.reject(error)
                                })
                            } else {
                                this.getCaptcha()
                                this.$message.error(response.data.msg)
                                this.dataForm.username = ''
                                this.dataForm.password = ''
                                this.dataForm.captcha = ''
                            }
                        }).catch(error => {

                        })
                    }
                })
            },
            //福利列表的显示
            loadingWelfare(){
                commonApi.loadingWelfare()
                .then(response =>{
                    this.walfareOption = response.data.data.slice(0,10)
                })
                .catch(error => {
                    Promise.reject(error)
                })
            },
            /*个人用户和企业用户相互切换*/
            changeCompanyOrPersonal(){
                if (this.companyOrPerson == true){
                    this.companyOrPerson = false
                    this.dataForm.companyOrPerson = '3'
                    return
                }
                if (this.companyOrPerson == false){
                    this.companyOrPerson = true
                    this.dataForm.companyOrPerson = '2'
                    return;
                }
            },

            /*头像的上传*/
            handleAvatarSuccess(res, file) {

/*                console.log("res===>",res)
                console.log("file",file)*/

                this.baseInfoForm.advator = res.pathUrl
                this.imageUrl = URL.createObjectURL(file.raw);
                console.log(this.imageUrl)
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            /*处理头像上传的方法*/
            uploadUrl(){
                const userId = JSON.parse(localStorage.getItem("user")).userId
                this.uploadAdvatorUrl = 'http://localhost:8002/liepin/usermanage/usermanagement/userUploadAdvator/' + userId
            },

        },
        watch:{
            isTokens(value){
                //console.log("===>>",value)
            }
        }
    }
</script>

<style scoped>

    .advatar_container{
        background-color: #F6F6F6;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #000000;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
    .avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: block;
    }



    .el-main {
        background-color: #E9EEF3;
        padding: 0px;
        color: #333;
    }

    in_mouse_hover{
        background-color: #C0C4CC;
    }

    /*hover 里面的字体样式*/
    .p-style-info{
        /*float: left;*/
        display: inline-block;
        margin-left: 10px;
        margin-top: 10px;
        width: 125px;
        font-size: 13px;
        color: #404C5B;
        text-align: left;
    }

    /*导航条样式*/
    .main-nav{
        /*background-color: #1787FB;*/
        /*background-color: #bfa;*/
    }
    .main-nav-Info{
        width: 1360px;
        height: 60px;
        margin: 0 auto;
        align-content: center;
    }
    /*内容区域*/
    .main-content{
        /*background-color: indianred;*/
        width: 1360px;
        height: 60px;
        margin: 0 auto;
    }

    /*内容左侧边栏位*/
    .main-content-leftSide{
        float: left;
        width: 280px;
        height: 400px;
        margin-top: 10px;
        background-color: #FFFFFF;
    }



    .main-content-leftSide ul{
        /*width: 380px;*/
        margin-top: 30px;
        list-style-type: none;
        /*background-color: #bfa;*/
        font-size: 14px;
        font-weight: bold;
        font-family: 微软雅黑;
    }
    .main-content-leftSide li{
        list-style-type:none;
        width: 100%;
        height: 20px;
        line-height: 20px;
        padding: 8px 0px 8px 0px;
        /*background-color: #B3C0D1;*/
    }

    /*设置的是小箭头*/
    .main-content-leftSide ul i{
        display: inline-block;
        margin-left: 70px;
    }
    .main-content-leftSide ul span{
        display: inline-block;
    }
    /*li 设置最后一个*/
    .main-content-leftSide ul li:last-child{
        margin-top: 30px;
        /*color: red;*/
    }
    /*轮播图*/
    .main-content-content{
        float: left;
        width: 770px;
        height: 400px;
        margin-top: 10px;
        margin-left: 15px;
        background-color: #FFFFFF;
        /*display: none;                  !*先将这一块信息进行隐藏*!*/
    }

    /*hovery行业列表以后的效果*/
    .main-content-content-hover{
        float: left;
        padding:10px 20px 10px 20px;
        width: 740px;
        height: 379px;
        margin-top: 10px;
        margin-left: 0px;
        border: 1px solid #eeeeee;
        background-color: #FFFFFF;
        overflow-y:scroll;
    }
    /*隐藏滚动条*/
    .main-content-content-hover::-webkit-scrollbar{width:0;}
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 400px;
        margin: 0;
    }
    /*定义轮播的的颜色*/
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    .el-carousel__item:nth-child(2n+1) {
        background-color: #000;
    }
    /*右侧边栏位置*/
    .main-content-rightSide{
        float: left;
        width: 280px;
        height: 400px;
        margin-top: 10px;
        margin-left:15px;
        background-color: #FFFFFF;
    }
    .main-content-rightSide .main-title-loginInfo{
        padding: 20px;
    }
    .main-content-rightSide .main-content-loginInfo{
        padding-left: 20px;
        padding-left: 20px;
        padding-bottom: 20px;
    }
    .main-content-rightSide .main-content-loginMethod{
        margin-top: 20px;
        font-size: 12px;
        color: #999;
    }
    /*登陆按钮*/
    .main-content-rightSide .main-content-login-button{
        margin-top: 20px;
    }
    /*去注册*/
    .main-content-rightSide .main-content-go-register{
        margin-top: 25px;
        margin-left: 60px;
        font-size: 12px;
        color: #999999;
    }
    /*福利制度列表*/
    .main-welfare{
        /*background-color: indianred;*/
        background-color: #FFFFFF;
        width: 1360px;
        height: 60px;
        line-height: 60px;
        margin-top: 10px;
        margin-left: 80px;
    }
    /*福利列表的变成行内块元素*/
    .main-welfare .mian-welfare-list span{
        display: inline-block;
        margin-left: 30px;
    }
    .main-welfare .mian-welfare-list span:first-child{
        width: 120px;
    }
    .main-welfare .mian-welfare-list span:last-child{
        margin-left: 400px;
    }
</style>
